<template>
	<view class="content">
		<view
			@click="echarts.onClick"
			:prop="option"
			:defaultClickNumber="defaultClickNumber"
			:change:defaultClickNumber="echarts.defaultClickNumberMsg"
			:change:prop="echarts.updateEcharts"
			:id="id"
			class="echarts"
		>
		</view>
	</view>
</template>

<script>
	const snowyUuid = () => {
		let uuid = 'xxx-4xxx-yxxx'.replace(/[xy]/g, (c) => {
			let r = (Math.random() * 16) | 0,
				v = c === 'x' ? r : (r & 0x3) | 0x8
			return v.toString(16)
		})
		// 首字符转换成字母
		return 'xn' + uuid.slice(2)
	}
	export default {
		name: 'echarts',
		props: {
			option: {
				type: Object,
				require: true,
				default: {
					id: null
				}
			},
			id: {
				type: String,
				default: () => snowyUuid()
			},
			defaultClickNumber: {
				type: Number,
				require: false,
				default: 0
			},
			width: {
				type: String,
				default: () => ''
			}
		},
		watch: {
			width() {
				// this.updateEcharts()
				// if (window.echarts) {
				// 	window.echarts.updateEcharts()
				// }
			}
		},
		methods: {
			onViewClick(options) {
				this.$emit('click', options)
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
		//如果app上不管用 就把下边这个松开
			// import * as echarts from 'echarts';
			export default {
				name: "echarts",
				data() {
					return{
						myChart: null,
						// defaultClickNumber: 0,
						clickData: {}
					}

				},
				mounted() {
					// console.log(window.echarts)
		               if(window.echarts&&window.echartsDone){
					// if (typeof window.echarts === 'function') {
						this.initEcharts()
					} else {
	//                     const ec = document.createElement('script')
	// ec.src = '../../static/js/echarts.min.js'
	// var s = document.getElementsByTagName('script')[0]
	// s.parentNode.insertBefore(ec, s)

						const that = this;
						const script = document.createElement('script')
						script.src = '../../static/js/echarts.min.js'
						// script.onload=this.initEcharts() //这行在app端好用
						//下面的代码在h5端是好用的，但是app端不走，如果引入js不好使，你再去官网下载其他的js
						script.onload = function(t) {
							const scriptLi = document.createElement("script");
							scriptLi.src = '../../static/js/echarts.min.js'
							scriptLi.onload = that.initEcharts.bind(that)
							document.head.appendChild(scriptLi)
	                           window.echartsDone=true
						}
						document.head.appendChild(script)
					}
				},
				methods: {

					initEcharts() {
						const that = this;
						try{
							let echartsDoc = document.getElementById(that.id);
							// console.log("echarts",echarts)
							that.myChart = echarts.init(echartsDoc)
							if (that.myChart) {
								that.myChart.setOption(that.option)
								if (that.defaultClickNumber != 0) {
									that.defaultClick(that.defaultClickNumber);
								}
								that.myChart.on('click', param => {
									that.clickData = param;
								})
							}
						}catch(e){
							//TODO handle the exception
						}
				},
				//虽然没什么效果 但是一块抄上就完事了
				defaultClickNumberMsg(newValue, oldValue, ownerInstance, instance) {
					// 监听 service 层defaultClickNumber数据变更 必须在view上绑定defaultClickNumber 然后在通过change事件监听执行此方法
					this.defaultClickNumber = newValue;
				},
				updateEcharts(newValue, oldValue, ownerInstance, instance) {
					// 监听 service 层数据变更
					try{
						this.myChart.setOption(newValue)
					}catch(e){
					}
				},
				onClick(event, ownerInstance) {
					// 调用 service 层的方法
					ownerInstance.callMethod('onViewClick', {})
				},
				defaultClick(defaultClickNumber) { //默认选中第几个数据
					if (this.myChart) {
						this.myChart.dispatchAction({
							type: 'highlight',
							seriesIndex: 0,
							dataIndex: defaultClickNumber
						});
						// 当鼠标移入时，如果不是第一项，则把当前项置为选中，如果是第一项，则设置第一项为当前项
						this.myChart.on('mouseover', function(e) {
							this.myChart.dispatchAction({
								type: 'highlight',
								seriesIndex: 0,
								dataIndex: e.dataIndex
							});

						});

						//当鼠标离开时，把当前项置为选中
						this.myChart.on('mouseout', function(e) {
							index = e.dataIndex;
							this.myChart.dispatchAction({
								type: 'highlight',
								seriesIndex: 0,
								dataIndex: e.dataIndex
							});
						});
					}
				}
			}
			}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		width: 100%;
		height: 100%;
	}
</style>
